/**
 * 生成任务详情相关页面折线图
 */
export default ({ dates, data }) => {
  let maxValue = 0;
  data.forEach(({ data }) => {
    maxValue = Math.max(maxValue, ...data);
  });
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 50,
      left: '11%',
      right: '8%',
      bottom: 40,
      borderColor: '#ff0000',
      containLabel: true,
    },
    legend: {
      left: 'center',
      top: 10,
    },
    xAxis: {
      type: 'category',
      axisTick: false,
      axisLabel: {
        color: '#686C78',
      },
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#E6EAEF',
        },
      },
      data: dates,
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          color: '#E6EAEF',
        },
      },
      interval: parseInt(maxValue / 6),
      axisLabel: {
        color: '#686C78',
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        bottom: 0,
      },
    ],
    axisPointer: {
      lineStyle: {
        color: '#1990FE',
        type: 'dashed',
      },
    },
    series: data.map((item) => {
      item.type = 'line';

      item.areaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            // {
            //   offset: 1,
            //   color: '#ffffff',
            // },
            {
              offset: 0,
              color: item.color,
            },
          ],
        },
      };
      return item;
    }),
  };
  return option;
};
